<template>
	<view class="container">
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="商户资料" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<view class="item">
				<text>负责人：</text>
				<text>张大美</text>
			</view>
			<view class="item">
				<text>身份证号码：</text>
				<text>40365236441232563</text>
			</view>
			<view class="item">
				<text>手机号：</text>
				<text>18893039203</text>
			</view>
			<view class="item">
				<text>店名：</text>
				<text>大美汽修店</text>
			</view>
			<view class="item">
				<text>工商营业执照号码：</text>
				<text>4252336467474764646</text>
			</view>
			<view class="item">
				<text>经营区域：</text>
				<text>焦作市山阳区</text>
			</view>
			<view class="item">
				<text>地址：</text>
				<text>山阳区迎宾路32号</text>
			</view>
		</view>
		<view class="content ">
			<view class="item">
				<text>商家简介</text>
			</view>
			<text class="business_text">这里是简单的商家介绍这里是简单的商家介绍，这里是简单的商家，介绍这里是简单的商家介绍，这里是简单的商家介绍这里是简单的，这里是简单的商家介绍商家介绍。
			</text>
		</view>
		<view class="content">
			<view class="item">
				<text>身份证正反面照片</text>
			</view>
			<view class="img_view">
				<view class="bg_img">
					<image src="@/static/images/ryx/身份证正面.jpg"></image>
				</view>
				<view class="bg_img">
					<image src="@/static/images/ryx/身份证反面.jpg"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<text>营业执照</text>
			</view>
			<view class="img_view">
				<view class="bg_img">
					<image src="@/static/images/ryx/营业执照.jpg"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<text>门店照片</text>
			</view>
			<view class="img_view">
				<view class="bg_img">
					<image src="@/static/images/ryx/门店.jpg"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-text color="#fff" size="18" align="center" line-height="6vh" text="修改" @click="modify"></u-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			modify() {
				uni.$u.route('/pages/ryx/modifyMerchantInformation/modifyMerchantInformation');
			},
			returnButton() {
				uni.$u.route('/pages/lzx/business/homePage');
			}
		}
	}
</script>

<style lang="scss">
	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;
	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

		.business_text {
			line-height: 50rpx;
			color: #8a8a8a;
			font-size: 26rpx;
		}

		.item {
			display: flex;
			justify-content: space-between;

			text {
				font-size: 28rpx;
				line-height: 75rpx;
			}
		}

		.img_view {
			display: flex;

			.bg_img {
				width: 150rpx;
				height: 150rpx;
				background-color: #eaeaea;
				margin-right: 20rpx;
				border-radius: 20rpx;
				position: relative;

				image {
					max-width: 100%;
					max-height: 80%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	.bottom {
		height: 6vh;
		width: 70vw;
		margin: 0 auto;
		// transform: translateY(-22vh);
		background-color: #0662E6;
		border-radius: 60rpx;
		transform: translateY(14vh);
	}

	.container {
		padding-bottom: 17vh;
		box-sizing: border-box;
	}
</style>